/*最外层元素*/
@import "clear";

#wrapper {
  //头部
  #header {
    /*上半部分*/

    .headTop {
      background: #eaeaea;
      height: 30px;
      //版心元素
      .headTopMain {
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        .clearfix();
        //zuoc
        .left {
          float: left;

          h5 {
            float: left;
            margin-right: 5px;
          }

          p {
            float: left;

            a {
              &:first-child {
                border-right: 1px solid #b3aeae;
                padding-right: 2px;
              }
            }
          }
        }

        //右侧
        .right {
          float: right;

          nav {
            font-size: 0;

            a {
              padding-right: 10px;
              margin-right: 10px;
              font-size: 12px;
              border-right: 1px solid #b3aeae;

              &:last-child {
                border: none;
                margin-right: 0;
                padding-right: 0;
              }
            }
          }
        }
      }
    }

    /*下班部分*/

    .headBottom {
      /*版心元素*/

      .headBottomMain {
        width: 1200px;
        margin: 0 auto;
        .clearfix();
        /* logo*/

        .logo {
          float: left;

          a {
            img {
              width: 175px;
              height: 56px;
              margin: 25px 45px;
            }
          }
        }

        .search {
          float: right;
          margin-top: 35px;

          input {
            outline: none;

            &:first-child {
              box-sizing: border-box;
              width: 490px;
              height: 32px;
              padding: 0 4px;
              border: 3px solid #ea4a36;
              float: left;
            }

            &:last-child {
              width: 68px;
              height: 32px;
              color: #fff;
              background: #ea4a36;
              border: none;
            }

            &::-webkit-input-placeholder {
              color: yellowgreen;
            }
          }
        }
      }
    }
  }

  /*分类导航开始*/

  #navWrap {
    border-bottom: 2px solid #e1251b;
    /*版心元素*/

    .navWrapMain {
      width: 1200px;
      margin: 0 auto;
      .clearfix();

      a {
        margin: 0 22px;
        font-size: 16px;
        color: #333;
        line-height: 50px;
        float: left;

        &:first-child {
          float: left;
          width: 210px;
          height: 50px;
          background: #e1251b;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
          text-align: center;
          line-height: 50px;
        }
      }
    }
  }

  /*分类导航结束*/
  /*内容区域开始*/

  #content {
    //  版心元素
    .contentMain {
      width: 1200px;
      margin: 15px auto 0 auto;
      //  路径导航
      #navPath {
        padding: 9px 15px 9px 0;
        font-size: 0;

        a {
          font-size: 12px;
        }

        i {
          padding: 0 5px;
          font-size: 12px;
        }
      }

      //  路径导航结束
      //  中间区域
      #center {
        margin: 5px 0 15px;
        //  左侧放大镜
        .clearfix();

        #left {
          width: 400px;
          float: left;
          //  上边
          #leftTop {
            width: 400px;
            position: relative;
            //  小图框
            #smallPic {
              width: 400px;
              height: 400px;
              border: 1px solid #bfbfbf;
              position: relative;
              /*overflow: hidden;*/

              img {
                width: 400px;
                height: 300px;
              }

              .mask {
                position: absolute;
                width: 200px;
                height: 200px;
                background: rgba(255, 255, 255, .5);
                border: 1px solid #ddd;
                left: 0;
                top: 0;
              }
            }

            //  大图框
            #bigPic {
              position: absolute;
              width: 400px;
              height: 400px;
              border: 1px solid #ddd;
              left: 420px;
              top: 0px;
              overflow: hidden;

              img {
                width: 800px;
                height: 800px;
                position: absolute;
                left: 0;
                top: 0;
              }
            }
          }

          //  下边
          #leftBottom {
            width: 400px;
            margin-top: 5px;
            .clearfix();

            a {
              width: 10px;
              height: 52px;
              border: 1px solid #ccc;
              background: #ebebeb;
              text-align: center;
              line-height: 54px;
              float: left;

              &:first-child {
                margin-right: 4px;
              }
            }

            #piclist {
              width: 372px;
              height: 56px;
              float: left;
              overflow: hidden;
              position: relative;

              ul {
                white-space: nowrap;
                font-size: 0px;
                position: absolute;
                left: 0;
                transition: 0.5s;

                li {
                  width: 50px;
                  height: 50px;
                  border: 1px solid #ccc;
                  padding: 2px;
                  margin-right: 20px;
                  display: inline-block;

                  img {
                    width: 50px;
                    height: 50px;
                  }
                }
              }
            }
          }
        }

        //  右侧商品详情区域结束
        .right {
          width: 700px;
          float: right;
          //  商品详情数据
          .rightTop {
            h3 {
              font-size: 14px;
              line-height: 21px;
              margin-top: 15px;
            }

            > p {
              color: #e12228;
              margin-top: 15px;
            }

            .priceWrap {
              margin-top: 10px;
              line-height: 28px;
              background: #fee9ec;
              padding: 7px;

              .priceTop {
                .clearfix();

                > span {
                  float: left;
                  margin-right: 15px;
                }

                .price {
                  float: left;

                  > span {
                    font-size: 16px;
                    float: left;

                  }

                  > p {
                    float: left;
                    font-size: 24px;
                    color: #cc1122;
                    float: left;
                    font-weight: bold;
                  }

                  > i {
                    font-size: 12px;
                    color: #cc1122;
                    float: left;
                  }
                }

                > p {
                  float: right;

                  > span {

                  }
                }
              }

              .priceBottom {
                width: 520px;
                line-height: 28px;
                .clearfix();

                > span {
                  float: left;
                  margin-right: 15px;
                }

                > p {
                  float: left;

                  > span {
                    float: left;
                    color: #999;

                    &:first-child {
                      background: #c81623;
                      padding: 3px;
                      color: #fff;
                      margin-right: 15px;
                    }
                  }
                }
              }
            }

            .support {
              border-bottom: 1px solid #ededed;
              margin-top: 10px;
              line-height: 28px;
              .clearfix();

              > span {
                margin-right: 15px;
                float: left;
              }

              > p {
                color: #999
              }

            }

            .address {
              padding-bottom: 5px;
              margin-top: 10px;
              line-height: 28px;
              .clearfix();

              > span {
                margin-right: 15px;
                float: left;
              }

              > p {
                color: #999
              }

            }
          }

          .rightBottom {
            margin-top: 10px;
            line-height: 28px;

            .choose {
              .clearfix();

              .mark {
                height: 30px;
                background: snow;
                border: 1px solid #ddd;
                padding: 0 20px;
                margin-right: 20px;
                text-align: center;
                line-height: 30px;
                float: left;

                a {
                  color: red;
                  margin-left: 20px;
                  float: right;
                }
              }

            }

            //商品参数选择区域
            .chooseWrap {
              dl {
                margin: 13px 0;
                .clearfix();

                dt {
                  margin-right: 15px;
                  float: left;
                }

                dd {
                  float: left;
                  margin-right: 5px;
                  color: #666;
                  line-height: 24px;
                  padding: 2px 14px;
                  border-left: 1px solid #eee;
                  border-top: 1px solid #eee;
                  border-right: 1px solid #bbb;
                  border-bottom: 1px solid #bbb;

                  &:first-of-type {
                    color: #c81623;
                  }
                }
              }

            }

            //  添加购物车区域开始
            .addCart {
              .clearfix();

              .count {
                width: 70px;
                margin-right: 15px;
                position: relative;
                float: left;

                input {
                  width: 38px;
                  height: 37px;
                  border: 1px solid #ddd;
                  color: #555;
                }

                a {
                  width: 20px;
                  height: 18px;
                  color: #666;
                  background: #f1f1f1;
                  position: absolute;
                  right: 1px;
                  text-align: center;
                  line-height: 18px;
                  border: 1px solid #ddd;

                  &:first-child {
                    top: 0;
                  }

                  &:last-child {
                    top: 20px;
                    border-top: 0;
                  }

                }
              }

              button {
                float: left;
                padding: 0 25px;
                height: 36px;
                font-size: 16px;
                background: #e1251b;
                color: #fff;
                border: none;
              }
            }

            //  购物车区域结束
          }
        }
      }

      //  商品详情中间部分开始
      .goodsDetailWrap {
        width: 1200px;
        margin: 30px auto 0;
        .clearfix();
        //左边
        .leftAside {
          float: left;
          width: 210px;
          border: 1px solid #ccc;
          .clearfix();

          .asideTop {
            .clearfix();

            h4 {
              width: 105px;
              height: 40px;
              background: #fff;
              float: left;
              line-height: 40px;
              text-align: center;
              border-top: 3px solid #fff;

              &.active {
                border-top: 3px solid #e1251b;
                line-height: 37px;
                border-bottom: 1px solid #ccc;
                line-height: 40px;
                text-align: center;
                border-bottom: none;
              }
            }
          }

          //下边
          .asideContent {
            padding: 10px;

            > div {
              display: none;

              &.active {
                display: block;

                ul {
                  &.goodsList1 {
                    li {
                      width: 50%;
                      border-bottom: 1px dashed #ededed;
                      line-height: 28px;
                      float: left;
                    }
                  }

                  &.goodsList2 {
                    margin: 5px 0 15px;

                    li {
                      border-bottom: 1px solid #ededed;

                      img {
                        width: 152px;
                      }

                      spam {
                      }

                      p {
                        font-size: 16px;
                        color: #c81623;
                      }

                      .button {
                        margin-top: 5px;
                        margin-bottom: 5px;
                        text-align: center;

                        a {
                          border: 1px solid #8c8c8c;
                          color: #8c8c8c;
                          padding: 2px 14px;
                          line-height: 18px;
                        }
                      }

                    }
                  }
                }
              }
            }
          }
        }

        // 右边
        .rightDetail {
          width: 980px;
          float: left;
          margin-left: 8px;
          //  选择搭配开始
          .chooseBox {
            border: 1px solid #ddd;
            margin-bottom: 15px;

            h4 {
              border-bottom: 1px solid #ddd;
              background: #f1f1f1;
              color: #333;
              padding: 5px 0 5px 15px;

            }

            .listWrap {
              height: 170px;
              padding-top: 10px;

              .left {
                width: 127px;
                height: 165px;
                position: relative;
                float: left;
                text-align: center;

                img {
                  width: 87px;
                  margin: 0 auto;
                }

                p {
                  color: #c81623;
                  font-size: 16px;
                }

                i {
                  position: absolute;
                  top: 48px;
                  right: 25px;
                  font-size: 16px;
                }
              }

              .middle {
                width: 668px;
                height: 165px;
                float: left;
                text-align: center;

                li {
                  width: 127px;
                  margin: 0 20px;
                  float: left;

                  img {
                    width: 120px;
                    height: 130px;
                  }

                  > span {
                  }

                  div {
                    input {
                    }

                    span {
                    }
                  }
                }
              }

              //  右侧
              .right {
                border-left: 1px solid #ddd;
                float: left;
                width: 153px;
                height: 165px;
                padding-left: 25px;

                div {
                  margin: 10px 0;
                }

                p {
                  font-weight: bold;
                  margin-bottom: 10px;
                }

                i {
                  color: #b1191a;
                  font-size: 16px;
                  margin-bottom: 10px;
                }

                button {
                  padding: 10px 25px;
                  font-size: 16px;
                  color: #fff;
                  background: #e1251b;
                  border: none;
                }
              }
            }
          }

          //  选项卡开始
          .BottomDetail {
            //  菜单
            .tabBtns {
              background: #ededed;
              .clearfix();

              li {
                float: left;
                border-right: 1px solid #ddd;
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                background: #fff;
                height: 40px;
                padding: 0 11px;
                text-align: center;
                line-height: 40px;

                &.active {
                  background-color: red;
                  border-left: 1px solid #ddd;

                  a {
                    color: #fff;
                  }
                }
              }
            }

            //  内容
            .tabContents {
              div {
                padding-left: 20px;
                line-height: 24px;
                display: none;

                &.active {
                  margin: 10px 0;
                  display: block;
                }
              }
            }
          }
        }

      }
    }
  }

  /*内容区域结束*/
  /*右侧侧边栏*/

  .rightAside {
    width: 300px;
    height: 100%;
    background: #7a6e6e;
    transition: 0.5s;
    position: fixed;
    top: 0px;

    &.asideClose {
      right: -294px;
    }
    &.asideOpen {
      right: 0px;
    }

    .btns {
      width: 35px;
      height: 35px;
      background: #7a6e6e;
      border-radius: 5px 0 0 5px;
      left: -29px;
      background-size: 35px 35px;
      position: absolute;

      &.btnsClose {
        background: url("../images/s1.jpg");
      }
      &.btnsOpen {
        background: url("../images/s2.jpg");
      }
    }

    /*侧边内容*/

    .content {
      width: 294px;
      background: bisque;
      position: absolute;
      left: 6px;
      top: 0;
      bottom: 0;
      z-index: 50;
    }

    /*侧边导航*/

    .navList {
      position: absolute;
      left: -29px;
      top: 50%;
      transform: translateY(-50%);

      li {
        height: 35px;
        width: 35px;
        position: relative;

        p {
          height: 35px;
          width: 35px;
          background: #7a6e6e;
          background: url("../images/s1.jpg");
          transition: 0.5s;
        }

        i {
          width: 62px;
          height: 35px;
          text-align: center;
          line-height: 35px;
          position: absolute;
          left: 35px;
          transition: 0.5s;
          top: 0;
          background: #7a6e6e;
        }

        &:hover {
          p{
            background: pink;
          }
          i {
            background: pink;
            left: -62px;
          }

        }
      }
    }
  }
}
